<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
	<meta name="format-detection" content="telephone=no, email=no"/>
	<meta charset="UTF-8">
	<title>锅锅商城</title>
	<link rel="stylesheet" type="text/css" href="themes/css/core.css">
	<link rel="stylesheet" type="text/css" href="themes/css/icon.css">
	<link rel="stylesheet" type="text/css" href="themes/css/home.css">
	<link rel="icon" type="image/x-icon" href="favicon.ico">
	<link href="iTunesArtwork@2x.png" sizes="114x114" rel="apple-touch-icon-precomposed">

	<style type="text/css">

		#scrollBg{ width: 100%; height: 45px; line-height: 45px;background: rgba(251,55,67,0.8); display: none; z-index:-1; position: fixed; left: 0; top:0; text-align: center; font-size: 20px; color: #fff; }
	</style>
</head>
<body>
<div id="el">
	<header class="aui-header-default aui-header-fixed aui-header-clear-bg"> <!-- aui-header-clear-bg 清除背景色 -->
		<a href="#" class="aui-header-item">
			<i class="aui-icon aui-icon-code"></i>
		</a>
		<!--搜索栏-->
		<div class="aui-header-center aui-header-center-clear"  style="margin-right:50px;">
			<div class="aui-header-search-box" style="background-color:#fff">
				<i class="aui-icon aui-icon-small-search"></i>
				<!--<input id="" type="text"  placeholder="火锅底料 优惠 配料" class="aui-header-search" v-model="productsearch">-->
				<form action="my-products-class.html" οnsubmit="return searchData();">
					<input type="search" name="productSearch"   placeholder="火锅底料 优惠 配料" class="aui-header-search" v-model="productsearch"/>
				</form>
			</div>
		</div>
		<div id="scrollBg"></div>
	</header>
	<div class="aui-content-box">
		<!--轮播图-->
		<div class="aui-banner-content " data-aui-slider>
			<div class="aui-banner-wrapper">
				<div class="aui-banner-wrapper-item">
					<a href="#">
						<img src="themes/img/shoppingmall/lunbo2.jpg">
					</a>
				</div>
				<div class="aui-banner-wrapper-item">
					<a href="#">
						<img src="themes/img/shoppingmall/lunbo1.jpg">
					</a>
				</div>
				<div class="aui-banner-wrapper-item">
					<a href="#">
						<img src="themes/img/shoppingmall/lunbo3.png">
					</a>
				</div>
			</div>
			<div class="aui-banner-pagination"></div>
		</div>
		<!--有待提高的功能：签到、秒杀、会员介绍、拼团、分享领奖、等等等-->
		<!--
		<section class="aui-grid-content">
			<div class="aui-grid-row aui-grid-row-clears"> &lt;!&ndash; aui-grid-row-clear 清除 a标签 上下的边距 &ndash;&gt;
				<a href="my-sign.html" class="aui-grid-row-item">
					<i class="aui-icon-large aui-icon-sign"></i>
					<p class="aui-grid-row-label">每日签到</p>
				</a>
				<a href="my-time.html" class="aui-grid-row-item">
					<i class="aui-icon-large aui-icon-time"></i>
					<p class="aui-grid-row-label">限时抢购</p>
				</a>
				<a href="my-membership.html" class="aui-grid-row-item">
					<i class="aui-icon-large aui-icon-vip"></i>
					<p class="aui-grid-row-label">会员专享</p>
				</a>
				<a href="my-purchase.html" class="aui-grid-row-item">
					<i class="aui-icon-large aui-icon-group"></i>
					<p class="aui-grid-row-label">好货拼团</p>
				</a>
				<a href="my-invitation.html" class="aui-grid-row-item">
					<i class="aui-icon-large aui-icon-share"></i>
					<p class="aui-grid-row-label">分享领券</p>
				</a>
				<a href="my-sign.html" class="aui-grid-row-item">
					<i class="aui-icon-large aui-icon-recharges"></i>
					<p class="aui-grid-row-label">手机充值</p>
				</a>
				<a href="my-time.html" class="aui-grid-row-item">
					<i class="aui-icon-large aui-icon-finance"></i>
					<p class="aui-grid-row-label">金融理财</p>
				</a>
				<a href="my-membership.html" class="aui-grid-row-item">
					<i class="aui-icon-large aui-icon-appliance"></i>
					<p class="aui-grid-row-label">电器商城</p>
				</a>
				<a href="my-purchase.html" class="aui-grid-row-item">
					<i class="aui-icon-large aui-icon-supermarket"></i>
					<p class="aui-grid-row-label">萌宝超市</p>
				</a>
				<a href="my-invitation.html" class="aui-grid-row-item">
					<i class="aui-icon-large aui-icon-personal"></i>
					<p class="aui-grid-row-label">个人中心</p>
				</a>
			</div>
		</section>
		-->


		<div class="aui-title-head">
			<img src="themes/img/icon/i-i1.png"  alt="">
		</div>
		<!--可以放一些热商品-->
		<div class="aui-slide-box aui-slide-box-clear">
			<div class="aui-slide-list">
				<ul class="aui-slide-item-list" >
					<li class="aui-slide-item-item" v-for="p in productshot" >
						<a href="javascript:" class="v-link" @click="touiproduct(p.productId)">
							<img class="v-img" :src="p.productImg">
							<p class="aui-slide-item-title aui-slide-item-f-els" v-text="p.productDesc"></p>
							<p class="aui-slide-item-info">
								<span class="aui-slide-item-price">¥<span v-text="p.promotionPrice"></span></span>&nbsp;&nbsp;<span class="aui-slide-item-mrk">¥<span v-text="p.productPrice"></span></span>
							</p>
						</a>
					</li>
				</ul>
			</div>

		</div>

		<div class="aui-title-head">
			<img src="themes/img/icon/i-i2.png"  alt="">
		</div>
		<!--新品专场，可以放一些刚上架的商品-->
		<div class="aui-list-content">
			<div class="aui-list-item">
				<div class="aui-list-item-img">
					<img src="themes/img/shoppingmall/newproduct.jpg" alt="">
				</div>
				<div class="aui-slide-box">
					<div class="aui-slide-list">
						<ul class="aui-slide-item-list">
							<li class="aui-slide-item-item" v-for="p in productsnew">
								<a href="javascript:" class="v-link" @click="touiproduct(p.productId)">
									<img class="v-img" :src="p.productImg">
									<p class="aui-slide-item-title aui-slide-item-f-els" v-text="p.productDesc"></p>
									<p class="aui-slide-item-info">
										<span class="aui-slide-item-price">¥<span v-text="p.promotionPrice"></span></span>&nbsp;&nbsp;<span class="aui-slide-item-mrk">¥<span v-text="p.productPrice"></span></span>
									</p>
								</a>
							</li>


						</ul>
					</div>

				</div>
			</div>

		<!--猜你喜欢,图片大小统一为500*500px，否则很乱-->
		<div class="aui-recommend">
			<img src="themes/img/bg/icon-tj1.jpg" alt="">
			<!--为你推荐-->
		</div>
		<section class="aui-list-product">
			<div class="aui-list-product-box">
				<a href="javascript:" class="aui-list-product-item" v-for="pro in productslike">
					<div class="aui-list-product-item-img" @click="touiproduct(pro.productId)">
						<!--<img src="themes/img/pd/sf-15.jpg" alt="">-->
						<img :src="pro.productImg" alt="">
					</div>
					<div class="aui-list-product-item-text" @click="touiproduct(pro.productId)">
						<h3 v-text="pro.productDesc"></h3>
						<div class="aui-list-product-mes-box">
							<div>
							<span class="aui-list-product-item-price">
								<em>¥</em>
								<span v-text="pro.promotionPrice"></span>
							</span>
								<span class="aui-list-product-item-del-price">
								¥<span v-text="pro.productPrice"></span>
							</span>
							</div>
							<div class="aui-comment"><span v-text="pro.productPrice*20"></span>评论</div>
						</div>
					</div>
				</a>

			</div>
		</section>
	</div>


	<footer class="aui-footer-default aui-footer-fixed">
		<a href="index.html" class="aui-footer-item aui-footer-active">
			<span class="aui-footer-item-icon aui-icon aui-footer-icon-home"></span>
			<span class="aui-footer-item-text">首页</span>
		</a>
		<a href="class.html" class="aui-footer-item">
			<span class="aui-footer-item-icon aui-icon aui-footer-icon-class"></span>
			<span class="aui-footer-item-text">分类</span>
		</a>
		<!--可以添加发现好货等-->
		<!--
		<a href="find.html" class="aui-footer-item">
			<span class="aui-footer-item-icon aui-icon aui-footer-icon-find"></span>
			<span class="aui-footer-item-text">发现</span>
		</a>
		-->
		<a href="javascript:" @click="tocar()" class="aui-footer-item">
			<span class="aui-footer-item-icon aui-icon aui-footer-icon-car"></span>
			<span class="aui-footer-item-text">购物车</span>
		</a>
		<a href="/weixin/queryIndex" class="aui-footer-item">
			<span class="aui-footer-item-icon aui-icon aui-footer-icon-me"></span>
			<span class="aui-footer-item-text">我的</span>
		</a>
	</footer>
	</div>
</div>

	<script type="text/javascript" src="themes/js/jquery.min.js"></script>
	<script type="text/javascript" src="themes/js/aui.js"></script>
	<script src="themes/js/vue.js"></script>
	<script type="text/javascript">
		var vue = new Vue({
			el:"#el",
			data:{
				productslike:[],
				productsnew:[],
				productshot:[],
				productsearch:"",
			},
			created:function(){
				this.producu_like();
				this.producu_new();
				this.producu_hot();
			},
			methods:{
				//猜你喜欢
				producu_like:function(){
					var _this = this;
					$.ajax({
						type:"get",
						url:"/ShoppingMallHome/getProduct",
						dataType:"json",
						success:function(da){
							// for(var i = 0;i<da.li.length;i++){
							// 	_this.productslike.push(da.li[i]);
							// }
							_this.productslike = da.li;
							// console.log(_this.productslike);
						}
					});
				},
				//新品
				producu_new:function(){
					var _this = this;
					$.ajax({
						type:"get",
						url:"/ShoppingMallHome/getProductWithNew",
						data:{"limit":9},
						dataType:"json",
						success:function(da){
							_this.productsnew = da.li;
						}
					});
				},
				//爆款商品查询
				producu_hot:function(){
					var _this = this;
					$.ajax({
						type:"get",
						url:"/ShoppingMallHome/getProductWithHot",
						dataType:"json",
						success:function(da){
							_this.productshot = da.li;
							console.log(_this.productshot);
						}
					});
				},
				touiproduct:function (dat) {
					location.href="ui-product.html?productId="+dat;
				},
				tocar:function () {
					$.ajax({
						url: "/weixin/checkUserIsExit",
						data: {},
						dataType: "json",
						Type: "get",
						success:function(data){
							if(data.message=="success"){
								location.href="car.html";
							}else{
								alser("请先关注公众号");
								location.href="index.html";
							}
						}
					})
				}
			},
			watch:{
				'productsearch':function(){
					// this.productsearch
				}
			}

		});

		function setData(){
			console.log('enter 触发！');
			return false;//一定要返回false，告诉表单不要跳转
		}

        $(function () {
            //绑定滚动条事件
            //绑定滚动条事件
            $(window).bind("scroll", function () {
                var sTop = $(window).scrollTop();
                var sTop = parseInt(sTop);
                if (sTop >= 40) {
                    if (!$("#scrollBg").is(":visible")) {
                        try {
                            $("#scrollBg").slideDown();
                        } catch (e) {
                            $("#scrollBg").show();
                        }
                    }
                }
                else {
                    if ($("#scrollBg").is(":visible")) {
                        try {
                            $("#scrollBg").slideUp();
                        } catch (e) {
                            $("#scrollBg").hide();
                        }
                    }
                }
            });

        })
	</script>

</body>
</html>